<template>
    <div>
        <el-header>
            <headers  @fnc="search" @inputchange="getinput">
            </headers>
        </el-header>
        <el-main style="margin-top:1rem;">
            <el-row>
                <el-col :span="24">
                    <el-card shadow="never">
                        <p>
                            搜索内容：{{searchvalue}}
                        </p>
                        <p style="margin-top:2rem;">
                            分类：
                            <el-radio-group v-model="bigclassification" size="small">
                            <el-radio-button label="0">全部</el-radio-button>
                            <el-radio-button :label="item.id" v-for="item of level1" :key="item.id">{{item.classification}}</el-radio-button>
                            </el-radio-group>
                        </p>
                         <p style="margin-top:2rem;">
                            价格：
                            <el-radio-group v-model="pricerange" size="small">
                            <el-radio-button label="0" >全部</el-radio-button>
                            <el-radio-button label="1" >1000以内</el-radio-button>
                            <el-radio-button label="2">1000-3000</el-radio-button>
                            <el-radio-button label="3" >3000-5000</el-radio-button>
                            <el-radio-button label="4">5000以上</el-radio-button>
                            </el-radio-group>
                        </p>
                         <p style="margin-top:2rem;">
                            排序：
                            <el-radio-group v-model="sortby" size="small">
                            <el-radio-button label="1" >综合</el-radio-button>
                            <el-radio-button label="2" >价格升</el-radio-button>
                            <el-radio-button label="3" >价格降</el-radio-button>
                            <el-radio-button label="4">热度</el-radio-button>
                            </el-radio-group>
                        </p>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="30" style="margin-top:1rem;">
                <el-col :span="6" v-for="item of commodityData" :key="item.id" style="margin-top:0.5rem;">
                    <el-card :body-style="{ padding: '0',cursor:'pointer' }" shadow="hover" >
                        <div @click="skip_detail(item.id)">
                            <img :src="item.listPic" 
                            style="margin:10px;" class="image" width="280px" height="280px">
                            <div style="padding: 0px;text-align:center;">
                                <div style="height:50px;">
                                    <h4 style="color:#615959;">{{item.commodityName}}</h4>
                                    
                                </div>
                                <div style="height:20px;font-size:12px;">
                                    <p style="color:#868686;">{{item.commodityDescribe}}</p>
                                </div>
                                <div class="bottom clearfix">
                                    <h2 type="danger" style="padding:12px 20px;color:#d64e4e;">￥{{item.price}}</h2>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row style="margin-top:2rem;">
                <el-col :offset="10" :span="14">
                    <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="page"
                    :page-size="limit"
                    layout="total, prev, pager, next"
                    hide-on-single-page
                    :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>

<style scoped>

</style>

<script>
    import headers from '@/components/headers.vue'

    export default {
        data:function(){
            return {
                classifications:{},
                level1:[],
                level2:[],
                commodityData:[],

                inputvale:'',   
                searchvalue:'',

                pricerange:0,
                classification:0,
                bigclassification:0,
                sortby:1,
                page:1,
                limit:20,
                total:0
                
            }
        },
        components: {
            headers
        },
        methods:{
            update_search(){
                let url="search?bigclassification="+this.bigclassification+"&pricerange="+this.pricerange+"&sortby="+this.sortby+"&keywords="+this.inputvale+'&page='+this.page+'&limit='+this.limit
                console.log(url)
                this.$router.push(url)

            },
            search(){
                this.update_search()
            },
            getinput(val){
                this.inputvale=val
                console.log(val)
            },
            getdata(){
                let url=this.$store.state.base_url +'/commodity' + this.$route.fullPath
                console.log("获取数据")
                console.log(url,this.$route)
                this.$axios.get(url).then(data=>{
                    console.log(data)
                    this.commodityData=data.data.data.result
                    this.total=data.data.data.search.total
                })
            },
            handleCurrentChange(val){
                this.page=val
            },
            skip_detail(id) {
                console.log(id)
                this.$router.push("detail?id=" + id)
            },
        },
        created(){
            this.$axios.get(this.$store.state.base_url + '/classification/').then(data=>{
                let datas=data.data.data
                for (const iterator of datas) {
                    this.classifications[iterator.id]=iterator
                   if (iterator.level == 1) {
                        this.level1.push(iterator)
                    }else if (iterator.level == 2) {
                        this.level2.push(iterator)
                    } 
                }               
            })
            this.getdata()
            
        },
        updated(){
            //从别的页面跳到该页面渲染 搜索内容
            this.searchvalue=this.$route.query.keywords
            
            if(this.$route.query.bigclassification){
                this.bigclassification=this.$route.query.bigclassification
            }
            if(this.$route.query.sortby){
                this.sortby=this.$route.query.sortby
            }
            if(this.$route.query.pricerange){
                this.pricerange=this.$route.query.pricerange
            }
            
        },
        watch:{
            'pricerange':function(){
                this.update_search()
            },
            'sortby':function(){
                this.update_search()
            },
            'bigclassification':function(){
                this.update_search()
            },
            'page':function(){
                this.update_search()
            },
            '$route.fullPath':function(){
                this.getdata()
            }
        }
    }
</script>